<template>
	<view class="page">
		<z-header />

		<view class="grid2">
			<view
				class="bgc-white rd-16"
				v-for="(item, index) in goodList"
				:key="item.id"
				@click="HGotoDetail(item)"
			>
				<image
					class="w-full rd-tl-16 rd-tr-16"
					:src="item.banner[0]"
					mode="widthFix"
				></image>
				<view class="pt-12 pb-12 px-12">
					<text class="lines1 fs-28">{{ item.name }}</text>
					<view class="fd-r ai-fe mt-24">
						<text class="c-red mb-4 fs-24">¥</text>
						<text class="c-red fs-36">
							{{ item.price }}
						</text>
						<text class="ml-4 mb-4 c-red fs-20">起</text>
					</view>
				</view>
			</view>
		</view>

		<view class="h-2000"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

import ZHeader from './component/z-header.vue';
// import ZRush from './component/z-rush.vue';
// import ZGood from './component/z-good.vue';

import { spuPage } from '@/api/spuApi.js';
const goodList = ref([]);
const params = ref({
	current: 1,
	size: 10,
	sortField: 'saleCount',
	sortOrder: 'descend'
});
const getGoodList = async () => {
	spuPage(params.value).then((res) => {
		const arr = res.data.records.map((v) => {
			return v;
		});

		goodList.value.push(...arr);
		uni.stopPullDownRefresh();
	});
};

const HGotoDetail = ({ id }) => {
	uni.navigateTo({
		url: `/pages/zone1/goods/index?spuId=${id}`
	});
};

// 更新购物车
// import { useCartStore } from '@/store/cart.js';
// const cartStore = useCartStore();
// const token = uni.getStorageSync('token');
// if (token) {
// 	cartStore.getCartList();
// }

import { useGoodTypeStore } from '@/store/googType.js';
const goodTypeStore = useGoodTypeStore();

import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
onLoad(() => {
	goodTypeStore.HGetGoodTypeTree();
	getGoodList();
});

const wall = ref(null);
onPullDownRefresh(() => {
	params.value.pageNum = 1;
	goodList.value = [];
	wall.value.clear();
	getGoodList();
});

onReachBottom(() => {
	if (goodList.value.length % 10 == 0) {
		params.value.pageNum++;
	} else {
		return;
	}

	getGoodList();
});
</script>

<style lang="scss" scoped>
.grid2 {
	padding: 0 24rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 24rpx;
}
</style>
